<template>
	<div>

		<div class="details_img">
			<div class="Mask" @click="showTo">
				<div class="datails_swiper">

					<swiper :options="swiperOption" ref="mySwiper">
						<swiper-slide>
							<img src="//img1.qunarzz.com/sight/p0/201402/27/9566b58bc52cbdbac547b28c48e8ec96.jpg_600x330_aaf0f175.jpg" alt="" />
						</swiper-slide>
						
						<swiper-slide>
							<img src="http://img1.qunarzz.com/sight/p0/201402/27/d34c43eca9f79add0eeb3b967ddc1249.jpg_r_800x800_0887c323.jpg" alt="" />
						</swiper-slide>
						
						
						<swiper-slide>
							<img src="http://img1.qunarzz.com/sight/p0/201402/27/20ad9f18716444a2f277e7eb533bfaa1.jpg_r_800x800_e6ed0dc9.jpg" alt="" />
						</swiper-slide>
						
						
					</swiper>
					
					<div class="swiper-pagination" slot="pagination"></div>

				</div>

			</div>

		</div>


	</div>
</template>

<script>
	export default {
		data() {
			return {
				swiperOption: {
					pagination: {
						el: '.swiper-pagination',
						type: 'fraction'
					},
					loop: true
				}
			}
		},
		methods: {
			showTo() {
				this.$router.push({path:'/Main'})
			}
		}
	}
</script>

<style scoped="scoped">
	
	
	
	.content{
		height: 2000px;
	}
	
	
	.swiper-pagination{
		font-size: .4rem;
		color: white;
		position: absolute;
		bottom: -1rem;
	}
	.datails_title {
		width: 100%;
		height: 4rem;
	}
	
	.datails_title img {
		width: 100%;
		height: 100%;
	}
	
	.Mask {
		width: 100%;
		height: 100vh;
		background: #000000;
		position: fixed;
	}
	
	.datails_swiper {
		width: 100%;
		height: 4rem;
		position: absolute;
		left: 0;
		top: 50%;
		margin-top: -2rem;
		/*background: red;*/
	}
	
	.datails_swiper img {
		width: 100%;
		height: 100%;
	}
	.swiper-slide img{
		width: 100%;
		height: 4rem;
	}
</style>